<template>
  <Card>
    <p slot="title">人员违法记录</p>
    <ul class="toolbar" slot="extra">
      <li class="item">
        <Input
          v-model="keyword"
          placeholder="输入被执法人姓名以搜索"
          :search="true"
          style="width:300px;"
          enter-button="立即搜索"
          size="default"
        ></Input>
      </li>
    </ul>
    <Table :columns="tableColumns" :data="tableData" :height="400"></Table>
    <Divider />
    <Page :total="pageCount" show-elevator @on-change="renderTable" />
    <Spin v-if="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        loading:false,
        keyword:null,
        pageCount:0,
        tableData:[],
        tableColumns:[{
            title:'序号',
            key:'index',
            align:'center',
            width:80
        },{
            title:'被执法人姓名',
            key:'beName',
            align:'center'
        },{
            title:'执法地点',
            key:'exeAddress',
            align:'center'
        },{
            title:'执法时间',
            key:'exeTime',
            align:'center'
        },{
            title:'执法人',
            key:'exeName',
            align:'center'
        },{
            title:'所属部位',
            key:'exeDepName',
            align:'center'
        }]
    };
  },
  methods:{
      renderTable(){
          this.loading = true
          this.tableData = [];
          this.loading=false
      }
  },
  mounted() {
      this.renderTable();
  },
};
</script>

<style lang="" scoped>
</style>